<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

import { ArrowRight, CaretBottom, CaretRight } from '@element-plus/icons-vue'
import { addFile, addFolder, deleteFile, getFolderList, modifyFile, modifyFolder, queryFile, queryFolderList } from '@fl/api/material-api'
import FlUpload from '@fl/components/fl-upload.vue'
import { useClipboard } from '@vueuse/core'
import { cloneDeep } from 'lodash-es'
import { defineEmits, defineProps } from 'vue'

import type { formDataType, searchForm, tree } from '../type'

import { dialogTag, tabValue } from '../type'

const props = withDefaults(defineProps<{
    modelValue: number
    selectType?: string
}>(), {
    modelValue: tabValue.PIC_MANAGE,
    selectType: '', // banner图片 headerImg头角标 footerImg尾巴角标
})

const emits = defineEmits(['update:modelValue', 'checked'])

const moduleType = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emits('update:modelValue', value)
    },
})

const defaultExpandedKeys = ref<string[]>([])
const updateKey = ref<number>(666)
const updateFromKey = ref<number>(888)

const fileTree = ref<tree[]>([])
const searchFormRef = ref<FormInstance>()
const initParams = {
    likeName: '',
    uploadTime: [],
}
const searchParams = ref<searchForm>({
    likeName: '',
    uploadTime: [],
})

const allChecked = ref<boolean>(false)
const checkedList = ref<string[]>([])
const checkedFileList = ref<string[]>([])
const checkedFolderList = ref<string[]>([])
const loading = ref<boolean>(false)
const submitLoading = ref<boolean>(false)
const currentTreeNodeData = ref<tree>()
const treeToNode = ref<tree>() // 双击文件夹时，计算面包屑用的
const breadcrumbList = ref([])
const list = ref<any>([])
const dialogVisible = ref<boolean>(false)
const formRef = ref()
const dialogTitle = ref('')

const initState = {
    id: '',
    parentId: '',
    url: '',
    vedioDesc: '',
    vedioName: '',
    vedioPre: '',
    vedioUrl: '',
}

const form = ref(cloneDeep(initState))
const ruleFormRef = ref<FormInstance>()
const formInitData = {
    fileName: '',
    ids: [],
    parentId: '',
}
const formData = ref<formDataType>({
    fileName: '',
    ids: [],
    parentId: '', // 要移动到哪个文件夹
})

const formRules = reactive<FormRules>({
    fileName: [{ message: '请输入文件名称', required: true, trigger: 'blur' }],
    parentId: [{ message: '请选择上一级文件目录', required: true, trigger: ['blur', 'change'] }],
})
const rules = computed(() => {
    if (moduleType.value === tabValue.PIC_MANAGE) {
        return {
            parentId: [
                {
                    message: '请选择上传的目录',
                    required: true,
                },
            ],
            url: [
                {
                    message: '请上传图片',
                    required: true,
                },
            ],
        }
    }
    else {
        return {
            parentId: [
                {
                    message: '请选择上传的目录',
                    required: true,
                },
            ],
            vedioDesc: [
                {
                    message: '请输入视频简介',
                    required: true,
                },
            ],
            vedioName: [
                {
                    message: '请输入名称',
                    required: true,
                },
            ],
            vedioPre: [
                {
                    message: '请上传视频封面',
                    required: true,
                },
            ],
            vedioUrl: [
                {
                    message: '请上传视频',
                    required: true,
                },
            ],
        }
    }
})

const columns = computed(() => {
    if (moduleType.value === tabValue.PIC_MANAGE) {
        return [
            {
                fieldProps: { checkStrictly: true, data: fileTree.value },
                label: '上传到',
                prop: 'parentId',
                valueType: 'tree-select',
                width: 120,
            },
            {
                label: '上传',
                prop: 'url',
            },
        ]
    }
    else {
        return [
            {
                fieldProps: { checkStrictly: true, data: fileTree.value },
                label: '上传到',
                labelWidth: 100,
                prop: 'parentId',
                valueType: 'tree-select',
            },
            {
                label: '上传视频',
                labelWidth: 100,
                prop: 'vedioUrl',
            },
            {
                label: '视频名称',
                labelWidth: 100,
                prop: 'vedioName',
            },
            {
                label: '视频简介',
                labelWidth: 100,
                prop: 'vedioDesc',
            },
            {
                label: '视频封面',
                labelWidth: 100,
                prop: 'vedioPre',
            },
        ]
    }
})

/**
 * methods start
 */
function resetData() {
    allChecked.value = false
    checkedList.value = []
}

async function getListData(data?: tree) {
    loading.value = true
    getFolderList({
        category: moduleType.value,
    }).then(async (res: any) => {
        if (res?.length) {
            fileTree.value = res
            await setTreeData(res, [])
            await handleNodeClick(data || fileTree.value[0])
            defaultExpandedKeys.value.push(res[0].id)
        }
        else {
            fileTree.value = []
            handleNodeClick()
        }
        loading.value = false
    })
}

// 新建文件夹提交
async function setFolderSubmit(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    let msg = ''
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            const { fileName, ids, parentId } = formData.value
            switch (dialogTitle.value) {
                // 新增文件夹
                case dialogTag.ADD_FOLDER:
                    submitLoading.value = true
                    await addFolder({
                        category: moduleType.value,
                        fileName,
                        parentId,
                        type: 0, // 后台要求必传
                    }).then(() => {
                        msg = '新增成功'
                    })

                    break
                // 修改文件夹
                case dialogTag.EDIT_FOLDER:
                // 移动文件夹
                case dialogTag.MOVE_FOLDER:
                    submitLoading.value = true
                    await modifyFile({
                        ajlName: fileName,
                        category: moduleType.value,
                        ids: dialogTitle.value === dialogTag.MOVE_FOLDER ? checkedList.value : ids,
                        nowParentId: parentId || '-1',
                    }).then(() => {
                        msg = '修改成功'
                    })
                    break
            }
            submitLoading.value = false
            dialogVisible.value = false
        }
        else {
            console.log('error submit!', fields)
        }
    })
    if (msg) {
        getListData(currentTreeNodeData.value)
        ElMessage.success(msg)
    }
}

// 取消新建文件夹
function cancelFolderSubmit(formEl: FormInstance | undefined) {
    formEl?.resetFields()
    dialogVisible.value = false
}

// 修改tree上的目录信息
function editTreeItem(title, data: tree) {
    dialogTitle.value = title
    formData.value.fileName = data.fileName
    formData.value.ids.push(data.id)
    formData.value.parentId = Number(data.parentId) > 0 ? data.parentId : ''
    dialogVisible.value = true
}

function handleNodeClick(data?: tree) {
    resetData()
    if (!data) {
        list.value = []
        return
    }
    currentTreeNodeData.value = data
    queryFolderList({
        category: moduleType.value,
        deleted: 1, // 后台要求加上
        id: data.id,
    }).then(async (res) => {
        if (props.selectType) {
            list.value = (res || []).filter(val => val.type).map(item => ({
                ...item,
                checked: false,
            }))
        }
        else {
            list.value = (res || []).map(item => ({
                ...item,
                checked: false,
            }))
        }
    })
    breadcrumbList.value = data.breadcrumb
}

function setExpandedKeys(list) {
    list.forEach((item) => {
        if (defaultExpandedKeys.value.includes(item.id)) {
            defaultExpandedKeys.value.splice(defaultExpandedKeys.value.indexOf(item.id), 1)
        }
        if (item.list && item.list.length)
            setExpandedKeys(item.list)
    })
}

// tree节点关闭
async function collapseHanlder(data: tree) {
    defaultExpandedKeys.value.splice(defaultExpandedKeys.value.indexOf(data.id), 1)
    if (data.list && data.list.length)
        await setExpandedKeys(data.list)
    updateKey.value = +new Date()
}

// tree节点打开
function expandHanlder(data: tree) {
    defaultExpandedKeys.value.push(data.id)
    updateKey.value = +new Date()
}

// 递归插入面包屑数组(考虑方便功能性扩展，如点击其他目录时面包屑追踪)
function setTreeData(list, breadcrumb) {
    list.forEach((item) => {
        // 为了映射上传图片和上传视频那个弹窗里的tree-select组件data
        item.label = item.ajlName
        item.value = item.id
        item.children = item.list
        // 面包屑数组
        item.breadcrumb = [...breadcrumb, ...[item]]
        if (item.list)
            setTreeData(item.list, item.breadcrumb)
    })
}

function searchReset() {
    // formEl?.resetFields() // 没效果
    searchParams.value = cloneDeep(initParams)
    getListData()
}

function searchHandeler() {
    queryFile({
        category: moduleType.value,
        deleted: 1, // 后台要求加上
        endTime: searchParams.value.uploadTime[1],
        id: currentTreeNodeData.value?.id || '-1',
        likeName: searchParams.value.likeName,
        startTime: searchParams.value.uploadTime[0],
    }).then((res) => {
        list.value = res
    })
}

// 点击操作按钮公共方法
function showDialog(title) {
    dialogTitle.value = title
    // 新增文件夹、移动文件夹清空老的表单数据
    if ([dialogTag.ADD_FOLDER, dialogTag.MOVE_FOLDER].includes(title)) {
        ruleFormRef.value?.resetFields()
        formData.value = cloneDeep(formInitData)
    }

    if (title === dialogTag.MOVE_FOLDER) {
        formData.value.parentId = currentTreeNodeData.value?.id || '-1'
    }
    else if ([dialogTag.UPLOAD_PIC, dialogTag.UPLOAD_VIDEO].includes(title)) {
        form.value = cloneDeep(initState)
        form.value.parentId = currentTreeNodeData.value?.id || '-1'
        formRef.value?.formInstance.resetFields()
    }
    if (title === dialogTag.EDIT_PIC)
        updateFromKey.value = +new Date() //  处理FlUpload组件没有更新的问题
    dialogVisible.value = true
}

function deleteHandler(data) {
    ElMessageBox.confirm(
        data.mark ? data.mark : '删除后进入回收站',
        data.title ? data.title : '删除',
        {
            cancelButtonText: '取消',
            confirmButtonText: '删除',
            type: 'warning',
        },
    )
        .then(() => {
            // 永久删除
            if (data.title && data.mark) {
                deleteFile({
                    category: moduleType.value,
                    idFolders: checkedFolderList.value,
                    ids: checkedFileList.value,
                }).then(() => {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    getListData(currentTreeNodeData.value)
                })
            }
            else {
                // 放入回收站
                modifyFolder({
                    category: moduleType.value,
                    deleted: 0,
                    ids: data?.id ? [data.id] : checkedList.value,
                }).then(() => {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    getListData(currentTreeNodeData.value)
                })
            }
        }).catch(() => {
            ElMessage({
                message: '取消删除',
                type: 'info',
            })
        })
}

// 永久删除
function delFile() {
    const params = {
        mark: `确定要将所选分类或${moduleType.value === tabValue.PIC_MANAGE ? '图片' : '视频'}永久删除吗？`,
        title: `删除后将不可恢复，且删除分类时其包含的${moduleType.value === tabValue.PIC_MANAGE ? '图片' : '视频'}也将一并删除。如删除内容包含已被商品引用的${moduleType.value === tabValue.PIC_MANAGE ? '图片' : '视频'}，可能导致商品展示异常！`,
    }
    deleteHandler(params)
}

// 全部勾选
function allCheckedChange(val) {
    if (val) {
        list.value.forEach((item) => {
            item.checked = true
        })
    }
    else {
        list.value.forEach((item) => {
            item.checked = false
        })
    }
    checkedList.value = list.value.map(item => item.id)
}

function getTreeNodeData(arr, id) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].id && arr[i].id === id) {
            treeToNode.value = arr[i]
            break
        }
        else if (arr[i].list) {
            getTreeNodeData(arr[i].list, id)
        }
    }
}

// 图片编辑
function editPicHanlder(item) {
    form.value.id = item.id
    form.value.url = item.imgUrl
    form.value.parentId = item.parentId
    showDialog(dialogTag.EDIT_PIC)
}

// 双击进入文件夹
async function enterFolder(item: tree) {
    // 如果父层没有展开，则展开
    if (!defaultExpandedKeys.value.includes(item.parentId))
        defaultExpandedKeys.value.push(item.parentId)
    // getTreeNodeData方法是同步面包屑的，是在fileTree里的,双击请求接口后，面包屑需要同步
    await getTreeNodeData(fileTree.value, item.id)
    await handleNodeClick(treeToNode.value)
    defaultExpandedKeys.value.push(item.id)
    updateKey.value = +new Date()
}

// 图片、视频上传提交
async function fileSubmit(values) {
    let msg = ''
    let params: any = {}
    if (moduleType.value === tabValue.PIC_MANAGE) {
        params = {
            category: moduleType.value,
            imgUrl: values.url,
            parentId: values.parentId,
            type: 1, // 0文件夹，1文件
        }
    }
    else {
        params = {
            category: moduleType.value,
            fileName: values.vedioName, // 视频名称
            imgUrl: values.vedioPre, // 视频url
            introduction: values.vedioDesc, // 视频简介
            parentId: values.parentId,
            storePath: values.vedioUrl, // 视频路径
            type: 1, // 0文件夹，1文件
        }
    }
    if ([dialogTag.UPLOAD_PIC, dialogTag.UPLOAD_VIDEO].includes(dialogTitle.value)) {
        submitLoading.value = true
        await addFile(params).then(() => {
            msg = moduleType.value === tabValue.PIC_MANAGE ? '图片上传成功' : '视频上传成功'
        })
        submitLoading.value = false
    }
    else if ([dialogTag.EDIT_PIC].includes(dialogTitle.value)) {
        submitLoading.value = true
        await modifyFile({
            category: moduleType.value,
            ids: [form.value.id],
            imgUrl: values.url,
            nowParentId: values.parentId,
            type: 1, // 0文件夹，1文件
        }).then(() => {
            msg = '修改成功'
        })
        submitLoading.value = false
    }
    ElMessage.success(msg)
    getListData(currentTreeNodeData.value)
    dialogVisible.value = false
}

// 复制图片、视频链接
function copyHanlder(link) {
    const { copy, isSupported } = useClipboard()
    if (!isSupported.value) {
        navigator.clipboard.writeText(link).then(() => {
            ElMessage.success('复制链接成功')
        }).catch((err) => {
        // 复制失败
            console.error('复制失败', err)
        })
        return
    }
    copy(link)
    ElMessage.success('复制链接成功')
}

function handleReset() {
    console.log('handleReset')
}

function beforeClose() {
    dialogVisible.value = false
    if ([dialogTag.ADD_FOLDER, dialogTag.MOVE_FOLDER].includes(dialogTitle.value)) {
        // ruleFormRef.value.formInstance.resetFields()
        formData.value = formInitData
    }
    else {
        formRef.value?.formInstance.resetFields()
    }
}

function checkedChange(item) {
    if (!props.selectType)
        return
    list.value = list.value.map(val => ({
        ...val,
        checked: val.id === item.id,
    }))
    emits('checked', item.imgUrl)
}
/**
 * methods end
 */

// 素材类型发生变化，需要初始化
watch(
    () => moduleType.value,
    () => {
        defaultExpandedKeys.value = []
        getListData()
        resetData()
    },
    { immediate: true },
)
watchEffect(() => {
    if (!props.selectType) {
        checkedList.value = list.value.filter(item => item.checked).map(val => val.id)
        checkedFileList.value = list.value.filter(item => item.checked && item.type).map(val => val.id)
        checkedFolderList.value = list.value.filter(item => item.checked && !item.type).map(val => val.id)
        allChecked.value = list.value.length && list.value.every(item => item.checked)
    }
})
</script>

<template>
    <div class="material-module">
        <div class="left-box">
            <div v-if="!selectType"
                 v-loading="loading"
                 class="add-btn font"
                 @click="showDialog(dialogTag.ADD_FOLDER)"
            >
                新增文件夹
            </div>

            <el-scrollbar height="calc(100vh - 328px)">
                <el-skeleton v-if="loading"
                             :rows="5"
                             animated
                />

                <el-tree v-else
                         :key="updateKey"
                         style="max-width: 600px"
                         node-key="id"
                         :data="fileTree"
                         :default-expanded-keys="defaultExpandedKeys"
                         :expand-on-click-node="false"
                         :props="{
                             children: 'list',
                             label: 'ajlName',
                             value: 'id',
                         }"
                         @node-click="handleNodeClick"
                >
                    <template #default="{ node, data }">
                        <span :class="data.id === currentTreeNodeData.id ? 'tree-file-node active' : 'tree-file-node'"
                              :style="{ paddingLeft: node.level > 1 ? `${node.level * 12}px` : 0 }"
                        >
                            <div class="tree-label">
                                <el-icon v-if="!data.type && defaultExpandedKeys.includes(data.id)"
                                         @click.stop="collapseHanlder(data)"
                                ><CaretBottom /></el-icon>

                                <el-icon v-if="!data.type && !defaultExpandedKeys.includes(data.id)"
                                         @click.stop="expandHanlder(data)"
                                ><CaretRight /></el-icon>

                                <a :title="node.label">{{ node.label }}</a>
                            </div>

                            <span>
                                <el-icon @click.stop="editTreeItem(dialogTag.EDIT_FOLDER, data)"><EditPen /></el-icon>

                                <el-icon @click.stop="deleteHandler(data)"><Delete /></el-icon>
                            </span>
                        </span>
                    </template>
                </el-tree>
            </el-scrollbar>
        </div>

        <div class="right-content">
            <div class="search-form">
                <el-form ref="searchFormRef"
                         :model="searchParams"
                         inline
                >
                    <el-form-item label="关键词">
                        <el-input v-model="searchParams.likeName" />
                    </el-form-item>

                    <el-form-item label="上传日期"
                                  class="upload-time"
                    >
                        <el-date-picker v-model="searchParams.uploadTime"
                                        type="datetimerange"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        format="YYYY/MM/DD"
                                        date-format="YYYY/MM/DD"
                                        value-format="YYYY-MM-DD 00:00:00"
                        />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary"
                                   @click="searchHandeler"
                        >
                            搜索
                        </el-button>

                        <el-button @click="searchReset(searchFormRef)">
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="file-content">
                <div v-if="!selectType"
                     v-loading="loading"
                     class="operate-btn"
                >
                    <el-button v-if="!currentTreeNodeData?.type && moduleType === tabValue.PIC_MANAGE"
                               class="btn"
                               @click="showDialog(dialogTag.UPLOAD_PIC)"
                    >
                        上传图片
                    </el-button>

                    <el-button v-if="moduleType === tabValue.VIDEO_MANAGE"
                               class="btn"
                               @click="showDialog(dialogTag.UPLOAD_VIDEO)"
                    >
                        上传视频
                    </el-button>

                    <el-button class="btn"
                               :disabled="!checkedList.length"
                               @click="showDialog(dialogTag.MOVE_FOLDER)"
                    >
                        移动到文件夹
                    </el-button>

                    <el-button class="btn"
                               :disabled="!checkedList.length"
                               @click="deleteHandler"
                    >
                        放入回收站
                    </el-button>

                    <el-button class="btn"
                               :disabled="!checkedList.length"
                               @click="delFile"
                    >
                        永久删除
                    </el-button>
                </div>

                <div class="breadcrumb">
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item v-for="crumb in breadcrumbList"
                                            :key="crumb.id"
                        >
                            <a class="breadcrumb-item"
                               :title="crumb.ajlName"
                               @click="handleNodeClick(crumb)"
                            > {{ crumb.ajlName }}</a>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>

                <div class="file-list">
                    <div v-if="!selectType"
                         class="checked-num"
                    >
                        <el-checkbox v-model="allChecked"
                                     label="全选"
                                     @change="allCheckedChange"
                        />

                        <span class="checked">已选中<strong>{{ checkedList.length }}</strong>个</span>
                    </div>

                    <div class="list"
                         :style="{ marginTop: selectType ? '16px' : '64px' }"
                    >
                        <el-scrollbar height="calc(100vh - 428px)">
                            <el-skeleton v-if="loading"
                                         :rows="5"
                                         animated
                            />

                            <div class="content">
                                <div v-for="item in list"
                                     :key="item.id"
                                     :class="{ 'checked': item.checked, 'file-item': item.type, 'folder-item': !item.type }"
                                >
                                    <el-checkbox v-model="item.checked"
                                                 class="checked"
                                                 @change="checkedChange(item)"
                                    />
                                    <!-- 文件分类 -->
                                    <template v-if="!loading && !item.type">
                                        <div class="folder"
                                             @dblclick="enterFolder(item)"
                                        >
                                            <div class="file-img">
                                                <img src="../image/file_img.png">
                                            </div>

                                            <span>{{ item.ajlName }}</span>
                                        </div>
                                    </template>
                                    <!-- 图片、视频文件展示 -->
                                    <template v-if="!loading && item.type">
                                        <div class="file">
                                            <div class="img-box" :style="{backgroundImage: `url(${item.imgUrl})`}">
                                            </div>

                                            <div class="operate-and-size">
                                                <span :class="selectType ? 'select-size' : 'size'">450 x 450</span>

                                                <div v-if="!selectType"
                                                     class="operate-btns"
                                                >
                                                    <el-icon v-if="moduleType === tabValue.PIC_MANAGE"
                                                             size="32"
                                                             color="#fff"
                                                             @click="editPicHanlder(item)"
                                                    >
                                                        <Edit />
                                                    </el-icon>

                                                    <el-icon size="32"
                                                             color="#fff"
                                                             @click="copyHanlder(moduleType === tabValue.PIC_MANAGE ? item.imgUrl : item.storePath)"
                                                    >
                                                        <Link />
                                                    </el-icon>

                                                    <el-icon class="icon-center"
                                                             size="32"
                                                             color="#fff"
                                                             @click="deleteHandler(item)"
                                                    >
                                                        <Delete />
                                                    </el-icon>
                                                </div>
                                            </div>

                                            <div class="name">
                                                {{ item.ajlName }}
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <el-dialog v-model="dialogVisible"
               :close-on-click-modal="false"
               width="666"
               :title="dialogTitle"
               :before-close="beforeClose"
    >
        <template v-if="![dialogTag.ADD_FOLDER, dialogTag.EDIT_FOLDER, dialogTag.MOVE_FOLDER].includes(dialogTitle)">
            <PlusForm ref="formRef"
                      :key="updateFromKey"
                      v-model="form"
                      :columns="columns"
                      :rules="rules"
                      :submit-loading="submitLoading"
                      @submit="fileSubmit"
                      @reset="handleReset"
            >
                <template v-if="[dialogTag.UPLOAD_PIC, dialogTag.EDIT_PIC].includes(dialogTitle)"
                          #plus-field-url
                >
                    <FlUpload v-model="form.url"
                              drag
                              :file-size="1204"
                              accept=".jpg,.jpeg,.png,.gif"
                    />
                </template>

                <template v-if="[dialogTag.UPLOAD_VIDEO, dialogTag.EDIT_VIDEO].includes(dialogTitle)"
                          #plus-field-vedioUrl
                >
                    <FlUpload v-model="form.vedioUrl"
                              drag
                              :file-size="1204"
                              :is-video="true"
                              accept=".mp4"
                    />
                </template>

                <template v-if="[dialogTag.UPLOAD_VIDEO, dialogTag.EDIT_VIDEO].includes(dialogTitle)"
                          #plus-field-vedioPre
                >
                    <FlUpload v-model="form.vedioPre"
                              drag
                              :file-size="1204"
                              accept=".jpg,.jpeg,.png,.gif"
                    />
                </template>
            </plusform>
        </template>

        <template v-else>
            <el-form ref="ruleFormRef"
                     :model="formData"
                     :rules="formRules"
            >
                <el-form-item label="上一级文件夹">
                    <el-tree-select v-model="formData.parentId"
                                    :data="fileTree"

                                    :props="{
                                        children: 'list',
                                        label: 'ajlName',
                                        value: 'id',
                                    }"
                                    check-strictly
                                    default-expand-all
                                    :render-after-expand="false"
                                    style="width: 350px"
                    />
                </el-form-item>

                <el-form-item v-if="dialogTitle !== dialogTag.MOVE_FOLDER"
                              label="文件夹名称"
                              prop="fileName"
                >
                    <el-input v-model="formData.fileName"
                              autocomplete="off"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary"
                               :loading="submitLoading"
                               @click="setFolderSubmit(ruleFormRef)"
                    >
                        提交
                    </el-button>

                    <el-button @click="cancelFolderSubmit(ruleFormRef)">
                        取消
                    </el-button>
                </el-form-item>
            </el-form>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-tree-node__content > .el-tree-node__expand-icon) {
    display: none;
}
:deep(.el-tree-node__content) {
    padding-left: 0 !important;
}
:deep(
        .el-tree--highlight-current
            .el-tree-node.is-current
            > .el-tree-node__content
    ) {
    color: #da0004;
}
.material-module {
    display: flex;
    .left-box {
        width: 340px;
        background-color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 20px;
        .add-btn {
            width: 100%;
            height: 30px;
            background-color: var(--el-color-primary);
            color: #fff;
            text-align: center;
            border-radius: 3px;
            line-height: 30px;
            cursor: pointer;
            margin-bottom: 20px;
        }
        .tree-file-node {
            display: flex;
            justify-content: space-between;
            width: 100%;
            &.active {
                background-color: #fff0f0;
                color: #da0004;
            }
            > span {
                display: none;
            }
            > a {
                width: 210px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }
            .el-icon {
                margin-right: 8px;
                cursor: pointer;
            }
            &:hover {
                > span {
                    display: block;
                }
            }
        }
    }
    .right-content {
        flex: 1;
        margin-left: 20px;
        position: relative;
        .upload-time {
            width: 366px;
        }

        .file-content {
            padding: 20px 0 20px 20px;
            background-color: #fff;
            border-radius: 4px;
        }

        .operate-btn {
            margin-bottom: 22px;
            .btn {
                border: 1px solid var(--el-color-primary);
                color: var(--el-color-primary);
            }
        }
        .breadcrumb {
            height: 46px;
            display: flex;
            align-items: center;
        }
        .file-list {
            border-top: 1px solid #e5e6eb;
            background-color: var(--app-content-bg-color);
            .checked-num {
                display: flex;
                align-items: center;
                height: 64px;
                position: absolute;
                margin-left: 16px;
                .checked {
                    padding-left: 6px;
                    transform: translate(0, -1px);
                    > strong {
                        color: #da0004;
                    }
                }
            }
            .list {
                // margin-top: 64px;
                padding: 0 10px 22px 0;
            }
        }
    }
}
.content {
    display: flex;
    flex-wrap: wrap;
}
.folder-item {
    width: 100px;
    height: 126px;
    box-sizing: border-box;
    position: relative;
    margin: 0 0 22px 22px;
    background-color: #fff;
    position: relative;
    &.checked {
        background-color: #fff0f0;
    }
    .folder {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px;
        overflow: hidden;
        justify-content: flex-end;
        height: 100%;
        .file-img {
            width: 64px;
            height: 54px;
            text-align: center;
            margin-bottom: 10px;
        }
        > span {
            color: #1d2129;
            font-size: 14px;
            white-space: nowrap;
        }
        &:hover,
        &.checked {
            background-color: #fff0f0;
        }
    }
    > .checked {
        position: absolute;
        top: 2px;
        left: 10px;
    }
}
.file-item {
    background-color: #fff;
    position: relative;
    box-sizing: border-box;
    width: 202px;
    height: 280px;
    padding: 8px 7px;
    position: relative;
    margin: 0 0 22px 22px;
    .img-box {
        width: 188px;
        height: 188px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .operate-and-size {
        width: 100%;
        height: 40px;
        .size {
            font-size: 14px;
            color: #1d2129;
            display: block;
            width: 100%;
            height: 100%;
            line-height: 40px;
            text-align: center;
        }
        .select-size {
            font-size: 14px;
            color: #1d2129;
            display: block;
            width: 100%;
            height: 100%;
            line-height: 40px;
            text-align: center;
        }
        .operate-btns {
            background-color: rgba(0, 0, 0, 0.5);
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            .el-icon {
                cursor: pointer;
            }
            > .el-icon:nth-child(2) {
                margin: 0 20px;
            }
        }
    }
    .name {
        font-size: 14px;
        color: #1d2129;
        text-align: center;
        margin-top: 8px;
    }
    &:hover,
    &.checked {
        background-color: #fff0f0;
        .size {
            display: none;
        }
        .operate-btns {
            display: flex;
        }
    }
    > .checked {
        position: absolute;
        top: 16px;
        left: 16px;
    }
}
</style>
